<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="formId">
        <div>
            <label for="bookname">书名：</label>
            <input type="text" name="bookname" id="bookname">
        </div>
        <div>
            <label for="author">作者：</label>
            <input type="text" name="author" id="author">
        </div>
        <div>
            <label for="publisher">出版社：</label>
            <input type="text" name="publisher" id="publisher">
        </div>
        <button id="btn">提交</button>
    </form>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        //第一种方法
        // $('#formId').on('submit', function(e) {
        //     e.preventDefault(); //阻止的是表单form的默认行为
        //     var bookname = $('#bookname').val();
        //     var author = $('#author').val();
        //     var publisher = $('#publisher').val();
        //     $.post('http://www.liulongbin.top:3006/api/addbook', {
        //         bookname: bookname,
        //         author: author,
        //         publisher: publisher,

        //     }, function(res) {
        //         if (res.status === 201) {
        //             alert('添加数据成功');
        //         }
        //     })
        // })
        ////////////////////
        $('#formId').on('submit', function(e) {
            e.preventDefault();
            var dataform = $(this).serialize();
            $.post('http://www.liulongbin.top:3006/api/addbook', dataform, function(res) {
                if (res.status === 201) {
                    alert('添加数据成功');
                }
            })
        })
    </script>
</body>

</html>